<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志统计</el-breadcrumb-item>
      <el-breadcrumb-item>日志展示</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 30px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="日志日期片段">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="border-radius: 2px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <el-table
        v-loading="isLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        style="width: 100%; margin-top: 10px;"
        max-height="400">
        <el-table-column
          fixed
          prop="createTime"
          :formatter="timestampToTime"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="用户ip"
          width="120">
        </el-table-column>
        <el-table-column
          prop="url"
          label="访问路径"
          width="300">
        </el-table-column>
        <el-table-column
          prop="description"
          label="用户操作"
          width="200">
        </el-table-column>
        <el-table-column
          prop="data"
          label="返回数据"
          width="800">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
    <transition name="fade">
      <loading v-if="false"></loading>
    </transition>
  </div>
</template>

<script>
import loading from '@/components/loading'
export default {
  name: "Logs",
  components: { loading },
  mounted() {
    this.isLoading = true
    this.getLogs()
  },
  methods: {
    getLogs() {
      // pageNum, pageSize
      // getLogs(1, 20).then(response =>{
      //   this.isLoading = false;
      //   this.tableData = response.data;
      //   console.log('we get the log data here', this.tableData)
      // })
      this.$store.dispatch('logs/getInfo', {pageNum: this.pageNum, pageSize: this.pageSize}).then(response =>{
        this.isLoading = false;
        this.tableData = response.data.list;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.pageTotal = response.data.total;
      })
    },
    onSubmit() {
      console.log('submit!');
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 时间戳转换成时间
// 使用element table组件中的formatter属性，传入一个函数
    timestampToTime (row, column) {
      var date = new Date(row[column.property]) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y+M+D+h+m+s
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$store.dispatch('logs/getInfo', {pageNum: this.pageNum, pageSize: val}).then(response =>{
        this.isLoading = false;
        this.tableData = response.data.list;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.pageTotal = response.data.total;
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$store.dispatch('logs/getInfo', {pageNum: val, pageSize: this.pageSize}).then(response =>{
        this.isLoading = false;
        this.tableData = response.data.list;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.pageTotal = response.data.total;
      })
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      pageTotal: 5,
      isLoading: false,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  }
}
</script>

<style lang="less" scoped>

</style>
